<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,minimum-scale=1.0, maximum-scale=1.0" />
    <title>vw适配响应式</title>

    <style>
      *,
      *:after,
      *:before {
        box-sizing: border-box;
      }

      :root {
        --font-size: clamp(2rem, 8vmin + 1rem, 4rem);
        --line: color-mix(in lch, canvasText 15%, transparent);
        --base: 0.4;
        --accent: hsl(8 100% 55%);
        --header-height: 100vh;
        --overlay: color-mix(in lch, canvas 70%, transparent);
        color-scheme: dark only;
      }

      :root[data-theme="light"] {
        --base: 0.3;
        --line: color-mix(in lch, canvasText 35%, transparent);
        --overlay: color-mix(in lch, canvas 70%, transparent);
        color-scheme: light only;
      }

      html:not(:focus-within) {
        scroll-behavior: smooth;
      }

      body {
        min-height: 100vh;
        font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
        background: canvas;
      }

      body::before {
        --size: 60px;
        content: "";
        height: 100vh;
        width: 100vw;
        position: fixed;
        background: linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size), linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size);
        mask: linear-gradient(-15deg, transparent 40%, white);
        top: 0;
        transform-style: flat;
        pointer-events: none;
        z-index: -1;
      }

      :is(h1, h2) {
        font-size: clamp(2rem, 3vw + 1rem, 6rem);
      }

      [href="#read"] {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        translate: -50% 0;
        width: 48px;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        color: canvasText;
      }
      [href="#read"] svg {
        width: 75%;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      }

      [data-split] {
        font-size: var(--font-size);
        font-weight: 600;
      }

      header {
        min-height: var(--header-height);
        display: grid;
        place-items: center;
        position: relative;
        transform-origin: 50% 0%;
      }

      h1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
      }

      h1 > span:first-of-type {
        font-size: 0.35em;
        color: var(--accent);
        text-transform: uppercase;
      }

      header > section {
        position: relative;
        top: 0;
        min-height: var(--header-height);
        width: 100%;
        translate: 0 -100%;
        display: grid;
        place-items: center;
        background: var(--overlay);
      }

      header > section::before {
        content: "";
        background: var(--overlay);
        position: absolute;
        inset: 0;
        translate: 0 100%;
      }

      video {
        position: sticky;
        top: 0;
        height: var(--header-height);
        width: 100vw;
        object-fit: cover;
        background: canvas;
      }

      footer {
        text-align: center;
        padding: 2rem;
        opacity: 0.875;
      }

      section:not(.reader) {
        min-height: 100vh;
        display: grid;
        place-items: center;
      }

      .content {
        position: sticky;
        top: 0;
        min-height: 100vh;
        width: 100ch;
        padding: 2rem 0;
        max-width: calc(100% - 4rem);
        display: grid;
        place-items: center;
        margin: 0 auto;
        line-height: 1;
      }

      .content span {
        opacity: calc(var(--base) + (var(--active)));
        transition: opacity 0.5s;
      }

      .reader {
        --thick: 0px;
        outline: var(--thick) dashed var(--accent);
        outline-offset: calc(var(--thick) * -1);

        /* The trick here is that --ppc could be dynamic	*/
        height: calc(((var(--ppc) * var(--content-length) + (var(--pad) * var(--buffer))) * 1px) + 100vh);
      }

      .bear-link {
        color: canvasText;
        position: fixed;
        top: 1rem;
        left: 1rem;
        width: 48px;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border-radius: 6px;
        /*	background: canvas;*/
        z-index: 2;
      }

      :where(.x-link, .bear-link):is(:hover, :focus-visible) {
        opacity: 1;
      }
      .bear-link svg {
        opacity: 0.8;
        width: 75%;
      }

      .sig path {
        --draw: 1.025;
        --end: 1.025;
        stroke-dasharray: var(--end);
        stroke-dashoffset: var(--draw);
      }

      .sig :is(.eye, .nose) {
        fill: transparent;
      }

      .sig {
        width: max(100px, 25vmin);
        color: canvasText;
        position: fixed;
        bottom: 4rem;
        right: 2rem;
        z-index: 10;
        translate: -20% -20%;
        rotate: -15deg;
        pointer-events: none;
      }

      h2 span {
        color: var(--accent);
      }

      @supports (animation-timeline: scroll()) {
        @property --active {
          inherits: true;
          initial-value: 0;
          syntax: "<number>";
        }

        .reader {
          view-timeline: --reader block;
        }

        .content span {
          animation: activate both steps(1);
          animation-timeline: --reader;
          animation-range: contain calc(((var(--start, 0) * var(--ppc)) * 1px)) contain calc(((var(--end, 0) * var(--ppc)) * 1px));
        }

        @keyframes activate {
          to {
            --active: 1;
          }
        }

        header {
          animation: scale-down both ease-in;
          animation-timeline: view();
          animation-range: exit-crossing;
          view-timeline: --header;
        }

        @keyframes scale-down {
          to {
            scale: 0.8 0.8;
          }
        }
        body > section:last-of-type {
          view-timeline-name: --sign-off;
        }

        .sig path {
          animation: draw both linear;
          animation-timeline: --sign-off;
          animation-range: entry 20% entry 80%;
        }
        .sig :is(.eye, .nose) {
          animation: draw both linear, fill both linear;
          animation-timeline: --sign-off;
        }
        .sig :is(.ear, .eye) {
          animation-range: entry 30% entry 90%;
        }
        .sig .nose {
          animation-range: entry 40% entry 100%;
        }
        @keyframes draw {
          to {
            stroke-dashoffset: 0;
          }
        }
        @keyframes fill {
          to {
            fill: currentColor;
          }
        }
      }

      .theme-toggle {
        color: var(--color);
        position: fixed;
        top: 1rem;
        right: 1rem;
        width: 48px;
        aspect-ratio: 1;
        padding: 0;
        border: 0;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: transparent;
        transition: background 0.2s;
        cursor: pointer;
        z-index: 10;
      }

      .theme-toggle::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 12px;
        background: hsl(0 0% 50% / calc(var(--intent, 0) * 0.25));
      }

      .theme-toggle:is(:hover, :focus-visible) {
        --intent: 1;
      }

      /*.dark .theme-toggle:is(:hover, :focus-visible) {
	background: hsl(0 0% 30%);
}*/

      .theme-toggle[aria-pressed="true"] svg path:last-of-type {
        display: block;
      }

      .theme-toggle svg {
        color: currentColor;
        width: 50%;
      }

      .theme-toggle[aria-pressed="true"] svg path:first-of-type,
      .theme-toggle svg path:last-of-type {
        display: none;
      }

      ::view-transition-group(root) {
        animation-duration: 1.25s;
      }
      ::view-transition-new(root),
      ::view-transition-old(root) {
        mix-blend-mode: normal;
      }

      ::view-transition-new(root) {
        animation-name: reveal-light;
      }

      ::view-transition-old(root),
      .dark::view-transition-old(root) {
        animation: none;
      }
      .dark::view-transition-new(root) {
        animation-name: reveal-dark;
      }

      @keyframes reveal-dark {
        from {
          clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
        }
        to {
          clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
        }
      }

      @keyframes reveal-light {
        from {
          clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
        }
        to {
          clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
        }
      }
    </style>
  </head>
  <body>
    <a class="bear-link" href="https://twitter.com/intent/follow?screen_name=jh3yy" target="_blank" rel="noreferrer noopener">
      <svg class="w-9" viewBox="0 0 969 955" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="161.191" cy="320.191" r="133.191" stroke="currentColor" stroke-width="20"></circle>
        <circle cx="806.809" cy="320.191" r="133.191" stroke="currentColor" stroke-width="20"></circle>
        <circle cx="695.019" cy="587.733" r="31.4016" fill="currentColor"></circle>
        <circle cx="272.981" cy="587.733" r="31.4016" fill="currentColor"></circle>
        <path
          d="M564.388 712.083C564.388 743.994 526.035 779.911 483.372 779.911C440.709 779.911 402.356 743.994 402.356 712.083C402.356 680.173 440.709 664.353 483.372 664.353C526.035 664.353 564.388 680.173 564.388 712.083Z"
          fill="currentColor"
        ></path>
        <rect x="310.42" y="448.31" width="343.468" height="51.4986" fill="#FF1E1E"></rect>
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M745.643 288.24C815.368 344.185 854.539 432.623 854.539 511.741H614.938V454.652C614.938 433.113 597.477 415.652 575.938 415.652H388.37C366.831 415.652 349.37 433.113 349.37 454.652V511.741L110.949 511.741C110.949 432.623 150.12 344.185 219.845 288.24C289.57 232.295 384.138 200.865 482.744 200.865C581.35 200.865 675.918 232.295 745.643 288.24Z"
          fill="currentColor"
        ></path>
      </svg>
    </a>
    <button aria-pressed="false" class="theme-toggle">
      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          fill="currentColor"
          d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
        />
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          fill="currentColor"
          d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
        />
      </svg>
      <span class="sr-only">Toggle Theme</span>
    </button>
    <header>
      <video autoplay muted loop src="https://assets.codepen.io/605876/turntable-opt.mp4"></video>
      <section>
        <h1>
          <span>CSS Pro</span>
          <span>Those Little Details</span>
        </h1>
        <a aria-hidden="true" href="#read">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" />
          </svg>
        </a>
      </section>
    </header>
    <section class="reader" id="read">
      <div class="content">
        <div class="sr-only">
          With CSS, you can do way more than you think. One of the most fun CSS animation APIs ever. A magical way to create scroll-driven animations without the need to touch JavaScript. Animations run off the main thread. And
          you can choose to use View Timelines or Scroll Timelines.
        </div>
        <div data-split aria-hidden="true">The little details that make your sites feel great. Combine sticky positioning with some scroll animation. With CSS, you can do way more than you think.</div>
      </div>
    </section>
    <section>
      <h2><span>You</span> got this.</h2>
      <svg class="sig" viewBox="0 0 271 209" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M40.3725 26.8984C58.6558 41.1564 141.659 43.1867 128.248 5.48254C127.911 4.53766 127.085 2.2403 125.938 2.0095C124.714 1.76297 121.929 6.39448 121.627 6.82375C100.965 36.1863 95.2641 73.5992 74.5923 102.644C63.7045 117.942 14.7891 145.678 5.55986 113.481C-17.5939 32.705 78.7483 76.0672 105.741 67.4678C119.757 63.0021 125.297 50.6825 132.831 39.1622C135.218 35.5126 137.628 24.6153 140.043 28.2467C144.771 35.3581 119.642 69.8761 115.559 78.4692C110.959 88.1482 129.228 46.7461 136.796 54.3333C146.229 63.7897 128.236 82.7359 153.367 61.6804C157.634 58.1059 166.582 46.4029 161.033 46.8455C153.977 47.4085 141.565 67.0198 151.685 70.0327C161.531 72.9635 176.039 38.7196 174.012 48.7901C173.009 53.769 168.343 67.3695 175.978 68.9069C186.537 71.0328 191.574 35.8659 197.537 44.8359C240.356 109.24 81.7126 283.324 50.2184 167.261C25.2159 75.1229 240.563 89.2082 268.88 137.08"
          class="sign"
          stroke="currentColor"
          stroke-width="4"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="head"
          pathLength="1"
          style="--path-speed: 2.1467741935483873"
        ></path>
        <path
          class="ear"
          d="M187.183 101.246C182.107 82.5407 155.739 77.9455 151.5 99"
          stroke="currentColor"
          stroke-width="4"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
          pathLength="1"
          style="--path-speed: 0.08225806451612903; --path-delay: 2.1467741935483873"
        ></path>
        <path
          class="ear"
          d="M117.998 100.704C117.998 91.1516 103.912 87.3662 96.5585 89.3717C84.7816 92.5836 80.6315 99.053 80.6315 110.505"
          stroke="currentColor"
          stroke-width="4"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
          pathLength="1"
          style="--path-speed: 0.09193548387096774; --path-delay: 2.229032258064516"
        ></path>
        <path
          class="eye"
          d="M170.025 108.347C168.627 105.551 162.781 110.631 165.494 114.577C168.207 118.523 173.936 114.091 171.643 109.965C171.035 108.871 168.547 107.832 167.355 108.428"
          stroke="currentColor"
          stroke-width="4"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
          pathLength="1"
          style="--path-speed: 0.04516129032258064; --path-delay: 2.3209677419354837"
        ></path>
        <path
          class="eye"
          d="M102.952 112.797C97.2672 112.797 96.7371 120.527 102.224 119.917C108.363 119.235 105.409 110.012 100.363 113.04"
          stroke="currentColor"
          stroke-width="4"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
          pathLength="1"
          style="--path-speed: 0.041935483870967745; --path-delay: 2.366129032258064"
        ></path>
        <path
          class="nose"
          d="M144.745 123.82C146.652 122.562 141.479 121.621 140.561 121.402C136.485 120.429 124.736 118.793 124.42 125.721C123.695 141.628 160.767 131.457 140.492 121.735"
          stroke="currentColor"
          stroke-width="4"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
          pathLength="1"
          style="--path-speed: 0.1032258064516129; --path-delay: 2.408064516129032"
        ></path>
      </svg>
    </section>
    <footer>jhey &copy; 2024 ʕ – ᴥ – ʔ</footer>
  </body>
  <script>
    import gsap from "https://cdn.skypack.dev/gsap@3.12.0";
    import ScrollTrigger from "https://cdn.skypack.dev/gsap@3.12.0/ScrollTrigger";

    // const section = document.querySelector('.reader')
    // const srOnly = document.querySelector('.sr-only')
    const toSplit = document.querySelector("[data-split]");
    const content = toSplit.innerText;
    const contentLength = content.length;

    const PPC = 10; // Pixels per character...
    const BUFFER = 40;
    /**
     * Iterate over the words.
     * Add them in creating start and finish indexes for them.
     * */
    // section.style.height = `${
    //   PPC * (contentLength + 2) + window.innerHeight + 8 * BUFFER
    // }px`

    document.documentElement.style.setProperty("--buffer", BUFFER);
    document.documentElement.style.setProperty("--ppc", PPC);
    document.documentElement.style.setProperty("--pad", 8);
    document.documentElement.style.setProperty("--content-length", contentLength + 2);

    const words = toSplit.innerText.split(" ");
    toSplit.innerHTML = "";
    // toSplit.style.setProperty('--ppc', PPC)
    let cumulation = 10;
    words.forEach((word, index) => {
      const text = Object.assign(document.createElement("span"), {
        innerHTML: `<span>${word} </span>`,
        style: `
      --index: ${index};
      --start: ${cumulation};
      --end: ${cumulation + word.length};
    `,
      });
      text.dataset.index = index;
      text.dataset.start = cumulation;
      text.dataset.end = cumulation + word.length;
      cumulation += word.length + 1;
      toSplit.appendChild(text);
    });

    if (!CSS.supports("animation-timeline: scroll()")) {
      gsap.registerPlugin(ScrollTrigger);
      console.info("GSAP ScrollTrigger: Registered");
      // Animate the words
      for (const word of toSplit.children) {
        gsap.fromTo(
          word,
          {
            "--active": 0,
          },
          {
            "--active": 1,
            ease: "steps(1)",
            scrollTrigger: {
              trigger: ".reader",
              start: `top top-=${word.dataset.start * PPC}`,
              end: `top top-=${word.dataset.end * PPC}`,
              scrub: true,
            },
          }
        );
      }
      // Animate the header
      gsap.to("header", {
        scale: 0.8,
        scrollTrigger: {
          trigger: "header",
          start: "top top",
          end: "bottom top",
          scrub: true,
        },
      });
      // Animate the signature
      gsap.fromTo(
        ".sig .sign",
        {
          "--draw": 1.025,
        },
        {
          "--draw": 0,
          scrollTrigger: {
            trigger: "body > section:last-of-type",
            scrub: 0.2,
            start: "top 75%",
            end: "bottom 150%",
          },
        }
      );
      gsap.fromTo(
        ".sig .ear",
        {
          "--draw": 1.025,
        },
        {
          "--draw": 0,
          scrollTrigger: {
            trigger: "body > section:last-of-type",
            scrub: 0.2,
            start: "bottom 130%",
            end: "bottom 100%",
          },
        }
      );
      gsap.fromTo(
        ".sig .eye",
        {
          "--draw": 1.025,
          fill: "transparent",
        },
        {
          "--draw": 0,
          fill: "canvasText",
          scrollTrigger: {
            trigger: "body > section:last-of-type",
            scrub: 0.2,
            start: "bottom 130%",
            end: "bottom 100%",
          },
        }
      );
      gsap.fromTo(
        ".sig .nose",
        {
          "--draw": 1.025,
          fill: "transparent",
        },
        {
          "--draw": 0,
          fill: "canvasText",
          scrollTrigger: {
            trigger: "body > section:last-of-type",
            scrub: 0.2,
            start: "bottom 120%",
            end: "bottom 100%",
          },
        }
      );
    }

    // Theme toggling
    const TOGGLE = document.querySelector(".theme-toggle");

    const SWITCH = () => {
      const isDark = TOGGLE.matches("[aria-pressed=true]") ? false : true;
      TOGGLE.setAttribute("aria-pressed", isDark);
      document.documentElement.dataset.theme = isDark ? "light" : "dark";
    };

    const TOGGLE_THEME = () => {
      if (!document.startViewTransition) SWITCH();
      document.startViewTransition(SWITCH);
    };

    document.documentElement.dataset.theme = "dark";
    TOGGLE.addEventListener("click", TOGGLE_THEME);
  </script>
</html>
